<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #cotainer {
            width: 100%;
            height: 800px;
            display: flex;
            justify-content: center;
        }
        
        #outDiv {
            width: 600px;
            height: 500px;
            overflow: hidden;
        }
        
        #imgList {
            width: 1600px;
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 200px;
        }
        
        #imgList img {
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>
    <div id="cotainer">
        <div id="outDiv">
            <div id="imgList" onmouseenter="doMouseEnterAction();" onmouseleave="doMouseLeaveAction();">
                <img src="img/lunbo/1.jpeg" alt="">
                <img src="img/lunbo/2.jpeg" alt="">
                <img src="img/lunbo/3.jpeg" alt="">
                <img src="img/lunbo/4.jpeg" alt="">
                <img src="img/lunbo/5.jpeg" alt="">
                <img src="img/lunbo/6.jpeg" alt="">
                <img src="img/lunbo/7.jpeg" alt="">
                <img src="img/lunbo/8.jpeg" alt="">
                <img src="img/lunbo/9.jpeg" alt="">
                <img src="img/lunbo/10.jpeg" alt="">
                <img src="img/lunbo/1.jpeg" alt="">
                <img src="img/lunbo/2.jpeg" alt="">
                <img src="img/lunbo/3.jpeg" alt="">
                <img src="img/lunbo/4.jpeg" alt="">
                <img src="img/lunbo/5.jpeg" alt="">
                <img src="img/lunbo/6.jpeg" alt="">
            </div>
        </div>
    </div>
</body>
<script>
    var imgListObj = document.getElementById("imgList");
    var marginLeft = 0;
    var myinteral = null;
    var timer;

    function doAction() {
        if (marginLeft == -1000) {
            marginLeft = 0
        }
        marginLeft--;
        imgListObj.style.marginLeft = marginLeft + 'px';
        if (marginLeft % 100 == 0) {
            clearInterval(myinteral);
            timer = setTimeout(function() {
                myinteral = setInterval(doAction, 50);
            }, 1000)
        }
    }

    function doMouseEnterAction() {
        clearInterval(myinteral);
    }

    function doMouseLeaveAction() {
        myinteral = setInterval(doAction, 50);
    }
    onload = function() {
        myinteral = setInterval(doAction, 50)
    }
</script>

</html>